<template>
	<view>
		<view class="logo">
			<u-image :src="zpImgUrl+'logo.png'" width="176" height="176" border-radius="40"></u-image>
		</view>
		<view class="logo-name">中盈甄品</view>
		
		
		<view class="form">
			<view class="item" style="padding-right: 30rpx;">
				<u-input maxlength="11" :focus="phoneFocus" v-model="phone" type="number" placeholder="请输入手机号"></u-input>
				
			</view>
			<view class="item">
				<u-input :focus="passwordFocus" v-model="password" type="password" placeholder="请输入密码"></u-input>
			</view>
			
			<view class="item btn-item">
				<view class="btn" @click="registerPage">注册</view>
				<view class="btn" @click="resetPassword">忘记密码</view>
				<!-- <navigator hover-class="none" url="/pages/user/login/register" class="btn">注册</navigator>
				<navigator hover-class="none" url="/pages/user/login/resetPassword" class="btn">忘记密码</navigator> -->
			</view>
		</view>

		<button class="submit" @tap="submit">
			<u-icon name="arrow-rightward" color="#ffffff" size="40"></u-icon>
		</button>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
import {appletImgUrl,zpImgUrl} from "@/common/config.js"
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				appletImgUrl:appletImgUrl,
				zpImgUrl:zpImgUrl,
				phone: '',
				phoneFocus: false,
				passwordFocus: false,
				smsCode: '',
				time: 60,
				password:"",
				scene:"",
				mobilePhone:"",
				options:""
			};
		},
		computed:{
			...mapState(['hasLogin'])
		},
		onLoad(options) {
			console.log('登录',options);
			this.options=JSON.stringify(options);
			if(options.scene){
				this.scene = options.scene;
			}
			this.mobilePhone=uni.getStorageSync('mobilePhone')
		},
		methods: {
			...mapMutations(['login']),
			
			async getCode() {
				if (this.time < 60) {
					this.$refs.uToast.show({
						title: '请在' + this.time + 's后获取',
						type: 'warning'
					})
					return
				}
				if (this.phone == '') {
					this.$refs.uToast.show({
						title: '请输入手机号',
						type: 'warning'
					})
					this.phoneFocus = true
					return
				}
				await this.$u.get('sms/send/register/' + this.phone)
				this.timer = setInterval(() => {
					this.time--
					if (this.time <= 0) {
						this.time = 60
						clearInterval(this.timer)
					}
				}, 1000)
				this.$refs.uToast.show({
					title: '发送成功',
					type: 'success'
				})
			},
			getPhoneNumber(e) {
				if (!e.detail.iv || !e.detail.encryptedData) {
					this.$refs.uToast.show({
						title: '您可能需要先绑定手机号才能执行该操作',
						type: 'error'
					})
					return
				}
				const self = this
				wx.login({
					success: res => {
						this.$u.post('user/getPhoneNumber', {
							code: res.code,
							encrypdata: e.detail.encryptedData,
							ivdata: e.detail.iv,
							xcxName: 'WG_MALL'
						}).then(res => {
							self.phone = res.purePhoneNumber
						})
					}
				})
			},
			submit(e) {
				if (this.phone == '') {
					this.phoneFocus = true
					this.$refs.uToast.show({
						title: '请输入手机号',
						type: 'warning'
					})
					return
				}
				if (this.password == '') {
					this.$refs.uToast.show({
						title: '请输入密码',
						type: 'warning'
					})
					return
				}
				// if (e.detail.errMsg == 'getUserInfo:fail auth deny') {
				// 	this.$refs.uToast.show({
				// 		title: '为了更好的为您服务，请同意该授权',
				// 		type: 'warning'
				// 	})
				// 	return
				// }
				this.$u.post('user/login', {
					userName: this.phone,
					password:this.password
				}).then(res => {
					uni.removeStorageSync('proUserId')
					uni.setStorageSync('userToken', res)
					getApp().globalData.bindState = true
					this.$u.get('user/info').then(userInfo => {
						console.log("用户信息",userInfo)
						if (userInfo.headPhoto) {
							if (userInfo.headPhoto.indexOf("https") != 0) {
								userInfo.headPhoto = this.imageURL + userInfo.headPhoto
							}
						} else {
							userInfo.headPhoto = this.zpImgUrl+'logo.png'
						}
						
						uni.setStorageSync('userInfo', userInfo)
					})
					
					if(this.scene == 'QR'){
						var pages = getCurrentPages(); //当前页面栈
						if (pages.length > 1) {
							var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象  
							beforePage.$vm.update(); //触发父页面中的方法change()  
						}
					}
					// this.$refs.uToast.show({
					// 	title: '登录成功',
					// 	back: true,
					// 	type: 'success'
					// })
					if(this.scene=="productDetailShare"){
						uni.navigateBack({
							delta: 1
						});
					  return	
					}
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/tabBar/index/index'
						});
					}, 1000)
					
					
				})
			},
			registerPage(){
				this.$u.route('/pages/user/login/register',{scene:this.scene});
			},
			resetPassword(){
				this.$u.route('/pages/user/login/resetPassword');
			}
		}
	}
</script>

<style lang="scss">
	.submit {
		margin: 0 auto;
		width: 108rpx;
		margin-top: 190rpx;
		height: 108rpx;
		border-radius: 50%;
		background: linear-gradient(-90deg, #FF3868, #FC6161);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.form {
		width: 500rpx;
		margin: 0 auto;
		padding-top: 80rpx;

		.item {
			background-color: #EEEEEE;
			// padding: 0 30rpx;
			margin-top: 50rpx;
			border-radius: 40px;
			display: flex;
			align-items: center;
			padding-left: 30rpx;

			&.phone {
				background: linear-gradient(90deg, #FF3768, #FC6161);
				color: #FFFFFF;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				// line-height: 80rpx;
				height: 80rpx;

				text {
					margin-left: 15rpx;
				}

				justify-content: center;
			}

			u-input {
				flex: 1;
			}

			button {
				background: none;
				padding: 0 30rpx;
				height: auto;
				line-height: normal;

				// padding-left: 30rpx;
				&::after {
					border: none;
				}
			}

			.code {
				color: #F39A15;
				font-size: 28rpx;
				border-left: 1rpx solid #F39A15;
				padding: 0 30rpx;
				margin-left: 20rpx;

			}

			&.btn-item {
				margin-top: 30rpx;

				.btn {
					font-size: 28rpx;
				}

				display: flex;
				justify-content: space-between;
				align-items: center;
				background: none;
			}
		}
	}

	.logo {
		display: flex;
		justify-content: center;
		padding-top: 70rpx;
	}

	.logo-name {
		font-size: 36rpx;
		text-align: center;
		margin-top: 30rpx;
	}
</style>
